<!DOCTYPE html>
<html lang="en">
	<head>
		<title>iWumbo</title>
		<link rel="icon" type="image/png" href="<?php echo base_url('assets/icon/favicon.ico'); ?>" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/js/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css'); ?>"/>
		<script type="text/javascript" src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
		<script type="text/javascript" src="<?php echo base_url('assets/js/jquery-ui-1.10.4/js/jquery-ui-1.10.4.js'); ?>"></script>
		<script type="text/javascript" src="<?php echo base_url('assets/js/highchart/highcharts.js'); ?>"></script>
		<script type="text/javascript" src="<?php echo base_url('assets/js/highchart/highcharts-more.js'); ?>"></script>
		<script type="text/javascript" src="<?php echo base_url('assets/js/highchart/modules/exporting.js'); ?>"></script>
		<script type="text/javascript">
			$(function () {
				var chart;
				var options;
				var bulan = 0;
				var tahun = 2009;
				var jenis = 'kedatangan';
				
				$(document).ready(function() {
						
				options = {

					chart: {
						renderTo: container,
						type: 'bubble',
						zoomType: 'xy'
					},
					title: {
						text: '10 Bandara Tersibuk di Indonesia'
					},					
					subtitle: {
						text: 'Kedatangan'
					},					
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'middle',
						borderColor: '#CCCCCC',
						borderWidth: 1,
						borderRadius: 5
					},					
					xAxis: {
						title: {
							text: 'Domestik'
						},
						max: 1600000
					},					
					yAxis: {
						title: {
							text: 'Internasional'
						},
						max: 600000
					},
					tooltip: {
						formatter: function() {
							return 'Penumpang Domestik: <b>' + Highcharts.numberFormat(this.x, 0, '.', '.') + '</b><br/>Penumpang Internasional: <b>' + Highcharts.numberFormat(this.y, 0, '.', '.') + '</b><br/>Jumlah Pesawat: <b>' + Highcharts.numberFormat(this.point.z, 0, '.', '.') + '</b>';
						}
					},
					series: [{}]
					};
				});
				
				$("#option").change(function(){
					options.subtitle.text = $("#option").val();
					jenis = options.subtitle.text.toLowerCase();
					chart = new Highcharts.Chart(options);
				});
				
				$.getJSON('data/'+tahun+'/'+jenis+'/'+(bulan+1)+'.json', function(data) {
					options.series = data;
					chart = new Highcharts.Chart(options);
				});

				$('#slider1').slider({
					min: 2009,
					max: 2013,
					step: 1,

					slide: function(event, ui) {
						$('#slider1_value').html(ui.value);
						tahun = ui.value;
						$.getJSON('data/'+tahun+'/'+jenis+'/'+(bulan+1)+'.json', function(data) {
							for (var i = 0; i < 10; ++i) {
								chart.series[i].setData(data[i].data);
							}
						});
					},
					stop: function(event, ui) {
						
					}
				});
				
				var arrMonth = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
				$('#slider2').slider({
					min: 0,
					max: 11,
					step: 1,

					slide: function(event, ui) {
						$('#slider2_value').html(arrMonth[ui.value]);
						bulan = ui.value;
						$.getJSON('data/'+tahun+'/'+jenis+'/'+(bulan+1)+'.json', function(data) {
							for (var i = 0; i < 10; ++i) {
								chart.series[i].setData(data[i].data);
							}
						});
					},
					stop: function(event, ui) {
						
					}
				})
			});
		</script>
		<style>
			.ui-slider-horizontal {
				width: 400px;
				border-radius: 100px;
			}
		</style>
	</head>
	<body>
		<div>
			<label>Silakan memilih data yang hendak divisualisasikan</label>
			<select style="width: 280px" id="option" name="option">
				<option value="Keberangkatan">Keberangkatan</option>
				<option value="Kedatangan">Kedatangan</option>
			</select>
		</div>
		
		<br/><br/>
		
		<label><i>Drag the mouse anywhere in the viz to zoom</i></label>
		<div id="container"></div>
		<div style="margin-left: 40px;">
			<div id="slider1title">Tahun</div>
			<div id="slider1"></div>
			<div id="slider1_value">2009</div>
			<br/>
			<div id="slider2title">Bulan</div>
			<div id="slider2"></div>
			<div id="slider2_value">Januari</div>
		</div>
	</body>
</html>